<template>
  <section>
    <h2 class="h2">章节增加</h2>
    <el-form ref="myForm" :model="formData" :rules="rules" label-width="100px">
      <el-row>
        <el-col :md="12" :sm="24">
          <el-form-item label="章节名称" prop="name">
            <el-input v-model="formData.name" maxlength="32" />
          </el-form-item>
        </el-col>
        <el-col :md="12" :sm="24">
          <el-form-item label="章节类型" prop="type">
            <chapter-type-select v-model="formData.type" :empty="false"></chapter-type-select>
          </el-form-item>
        </el-col>
        <el-col :md="12" :sm="24">
          <el-form-item label="父节点">
            {{ rowData.parent_name }}
          </el-form-item>
        </el-col>
        <el-col :md="24">
          <el-form-item label="添加资源" prop="resource">
            <vido-upload v-if="formData.type == 2" v-model="formData.resource" />
            <vido-input v-else-if="formData.type == 3" v-model="formData.resource" />
            <el-input v-else-if="formData.type == 4" v-model="formData.resource" placeholder="请填写资源地址" />
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="章节描述" prop="description">
            <el-input type="textarea" v-model="formData.description" maxlength="256" :rows="5" resize="none" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-button @click="handleClear(myForm)">清空</el-button>
        <el-button type="primary" @click.prevent="handleInsert(myForm)" native-type="submit">增加</el-button>
      </el-row>
    </el-form>
  </section>
</template>
  
<script setup lang="ts">
import { reactive, ref, defineEmits,defineProps,watch } from "vue";
import VidoUpload from "@/components/public/VideoUpload.vue";
import VidoInput from "@/components/public/VideoInput.vue";
import ChapterTypeSelect from "./ChapterTypeSelect.vue";
import { FormRules, FormInstance } from "element-plus";
import request from "@/utils/request";

const props = defineProps({
  // 父节点
  rowData: {
    type: Object,
    required: true
  }
});


// 定义事件触发器
const emits = defineEmits(["submit"]);

// 接收表单参数
const formData = reactive({
  name: "",
  price: 0,
  type: 2,
  description: "",
  resource: ""
});

const myForm = ref<FormInstance>();

const rules = reactive<FormRules>({
  name: [{ required: true, message: "请输入标题", trigger: "blur" }],
  resource: [{ required: true, message: "请添加资源", trigger: "blur" }],
});


const handleClear = (myForm: FormInstance) => {
  if (!myForm) {
    return;
  }
  myForm.resetFields();
}

const handleInsert = (myForm: FormInstance) => {
  myForm.validate((valid) => {
    // 校验失败
    if (!valid) {
      return;
    }

    // 从props中将父id读取出来赋值给data
    const data = {...formData,id: 0}

    // 发起请求
    request({
      data,
      method: "POST",
      url: "/chapter/insert"
    }).then(res => {
      if (res.data.code > 0) {
        alert("增加成功");
        // 将后端返回的主键值赋值给data
        data.id = res.data.data;
        emits("submit","insert",data);
        myForm.resetFields();
      } else {
        alert("增加失败");
      }
    })
  });
}

// 侦听父传子的参数变化
watch(() => props.rowData,(newVal) => {
  if (!newVal) {
    return;
  }
  // 将newVal的值合并到formData中，然后组件便根据formData填充值
  Object.assign(formData,newVal);
},{immediate: true})
</script>
  
<style scoped lang="scss">

.h2 {
  padding: 10px 0px;
}

</style>